<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="styles/ajaxDialogTheme.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery UI Clip Example</title>
  </head>
  <body>
    <div id="ajaxDialog" class="flora"></div>
    <div class="content">
      <h3>Section 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sagittis, turpis eu dapibus eleifend, tortor est porttitor nisl, ac ornare mi dolor et orci. Integer ultrices pede ut massa. In sit amet est sed purus bibendum luctus. Mauris ut quam. Phasellus consectetuer. Sed diam. Donec auctor, arcu id eleifend auctor, elit risus aliquet pede, elementum viverra diam odio lobortis ante. Nam viverra sagittis ligula. Quisque molestie nulla ac urna. Integer elementum, ligula ut semper eleifend, pede odio ullamcorper nisl, id faucibus diam turpis at mi. Ut in odio. Ut eu massa quis pede congue aliquam. Nulla bibendum sem sit amet urna. Sed magna. Nunc sodales, massa eget gravida elementum, nisl eros sagittis ante, at vestibulum augue orci non velit. Integer nec odio a mauris aliquam pretium. Proin tempor.</p>
      <p class="helpLabel">关于此部分的帮助，请单击此处:</p><span id="help1" class="helpIcon"></span>
    </div>
	  <div class="content">
	    <h3>Section 2</h3>
	    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec sagittis, turpis eu dapibus eleifend, tortor est porttitor nisl, ac ornare mi dolor et orci. Integer ultrices pede ut massa. In sit amet est sed purus bibendum luctus. Mauris ut quam. Phasellus consectetuer. Sed diam. Donec auctor, arcu id eleifend auctor, elit risus aliquet pede, elementum viverra diam odio lobortis ante. Nam viverra sagittis ligula. Quisque molestie nulla ac urna. Integer elementum, ligula ut semper eleifend, pede odio ullamcorper nisl, id faucibus diam turpis at mi. Ut in odio. Ut eu massa quis pede congue aliquam. Nulla bibendum sem sit amet urna. Sed magna. Nunc sodales, massa eget gravida elementum, nisl eros sagittis ante, at vestibulum augue orci non velit. Integer nec odio a mauris aliquam pretium. Proin tempor.</p>
	    <p class="helpLabel">关于此部分的帮助，请单击此处:</p><span id="help2" class="helpIcon"></span>
	  </div>
	  
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript">
			$(function(){	
				//control variable
				var help = 0;
			
				//define doOk function
				var doOk = function() {

					//close the dialog
					$("#ajaxDialog").parent().parent().hide("clip", {}, "normal", function() {
						$("#ajaxDialog").dialog("close");
					});
				}		
						
				//define config object
				var dialogOpts = {
					title:"Help",
					modal:true,
					overlay:{
						background:"url(img/modal.png) repeat" 
					},
					buttons: {
						"Ok!":doOk
					},
					height:"110px",
					autoOpen:false,
					open: function() {
					
						//display correct dialog content
						help == 1 ? $("#ajaxDialog").load("helpContents1.html") : $("#ajaxDialog").load("helpContents2.html");
					}
				};
				
					//create the dialog
				$("#ajaxDialog").dialog(dialogOpts);
				
				//define click handler for helpIcons
				$(".helpIcon").click(function(event) {
				
					//which icons was clicked?
					event.target.id == "help1" ? help = 1 : help = 2;
					
					//call open method
					$("#ajaxDialog").dialog("open");
				
				});
			});
		</script>
  </body>
</html>
